<!doctype html>
<html>
    <head>
        <title>UEditorPlus 完整演示</title>
        <meta name="viewport" content="width=device-width, minimum-scale=0.5, maximum-scale=5, user-scalable=no">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

        <script type="text/javascript" charset="utf-8" src="../ueditor.config.js"></script>
        <script type="text/javascript" charset="utf-8" src="editor_api.js"></script>
        <script type="text/javascript" charset="utf-8" src="../lang/zh-cn/zh-cn.js?{timestamp}"></script>
        <script src="./../plugins/demo/demo.js"></script>
        <script type="text/javascript">
            // 集成135
            UE.registerUI('135editor', function(editor, uiName) {
                // var dialog = new UE.ui.Dialog({
                //     iframeUrl: editor.options.UEDITOR_HOME_URL+'dialogs/135editor/135EditorDialogPage.html',
                //     cssRules:"width:"+ parseInt(document.body.clientWidth*0.9) +"px;height:"+(window.innerHeight -50)+"px;",
                //     editor:editor,
                //     name:uiName,
                //     title:"135编辑器"
                // });
                // dialog.fullscreen = false;
                // dialog.draggable = false;

                var editor135;

                function onContentFrom135(event) {
                    if (typeof event.data !== 'string') {
                        if (event.data.ready) {
                            editor135.postMessage(editor.getContent(), '*');
                        }
                        return;
                    };
                    if (event.data.indexOf('<') !== 0)
                        return;

                    editor.setContent(event.data);
                    editor.fireEvent("catchRemoteImage");
                    window.removeEventListener('message', onContentFrom135);
                }

                var btn = new UE.ui.Button({
                    name: 'btn-dialog-' + uiName,
                    className: 'edui-for-135editor',
                    title: '135编辑器',
                    onclick: function() {
                        // dialog.render();
                        // dialog.open();

                        // 由于内嵌iframe登录存在跨域问题，禁用了cookie, 使用window.open方式调用135编辑器
                        editor135 = window.open(
                            'https://www.135editor.com/beautify_editor.html?callback=true&appkey=',
                            '135editor', 'height=' + (window.screen.availHeight - 100) +
                            ',width=' + (window.screen.availWidth - 100) +
                            ',top=50,left=50,help=no,resizable=no,status=no,scroll=no')

                        window.removeEventListener('message', onContentFrom135);
                        window.addEventListener('message', onContentFrom135, false);
                    }
                });
                return btn;
            }, undefined);
            UE.registerUI('dialog', function(editor, uiName) {
                var btn = new UE.ui.Button({
                    name: 'xiumi-connect',
                    title: '秀米',
                    onclick: function() {
                        var dialog = new UE.ui.Dialog({
                            iframeUrl: 'https://ent.xiumi.us/ue/xiumi-ue-dialog-v5.html',
                            editor: editor,
                            name: 'xiumi-connect',
                            title: "秀米图文消息助手",
                            cssRules: "width:1200px;height:800px;",
                        });
                        dialog.render();
                        dialog.open();
                    }
                });

                return btn;
            });
        </script>
        <script>
            // window.UEDITOR_CONFIG.toolbars[0].push('undo');
        </script>
        <script>
            var _hmt = _hmt || [];
            (function() {
                var hm = document.createElement("script");
                hm.src = "https://hm.baidu.com/hm.js?f84f35a44b5cc5c0b10c3fabdf0f322b";
                var s = document.getElementsByTagName("script")[0];
                s.parentNode.insertBefore(hm, s);
            })();
        </script>
        <style>
            :root {
                /*--ueditor-top-offset: 20px;*/
            }
        </style>
        <link rel="stylesheet" href="./style.css" />
    </head>
    <body class="demo-editor-page">
        <div>
            <h1>完整示例</h1>
            <div>
                <script id="editor" type="text/plain" style="height:300px;">
                    <h1>
    你好 UEditorPlus
</h1>
<p>
    UEditorPlus 是基于 UEditor 二次开发的富文本编辑器，让 UEditor <span style="color: #E36C09;">焕<span style="color: #0070C0;">然</span><span style="color: #31859B;"><span style="color: #00B050;">一</span><span style="color: #FF0000;">新</span></span></span>
</p>

<table data-sort="sortDisabled">
    <tbody>
        <tr class="firstRow">
            <td valign="top" style="word-break: break-all;" rowspan="1" colspan="3">
                我是表格
            </td>
        </tr>
        <tr>
            <td width="273" valign="top" style="word-break: break-all;">
                如果
            </td>
            <td width="273" valign="top" style="word-break: break-all;">
                有一天
            </td>
            <td width="273" valign="top" style="word-break: break-all;">
                我离开了
            </td>
        </tr>
        <tr>
            <td valign="top" colspan="1" rowspan="1" style="word-break: break-all;">
                怎么才能
            </td>
            <td valign="top" colspan="1" rowspan="1" style="word-break: break-all;">
                证明我
            </td>
            <td valign="top" colspan="1" rowspan="1" style="word-break: break-all;">
                曾经来过
            </td>
        </tr>
    </tbody>
</table>
<pre class="brush:html;toolbar:false">&lt;div&gt;
  &lt;span&gt;这里是HTML标签&lt;/span&gt;
&lt;/div&gt;</pre>
<h2>
公式支持
</h2>
<p>
    <img src="https://r.latexeasy.com/image.svg?%5Cint%20%5Cfrac%7B1%7D%7Bx%7D%20dx%20%3D%20%5Cln%20%5Cleft%7C%20x%20%5Cright%7C%20%2B%20C"
      data-formula-image="%5Cint%20%5Cfrac%7B1%7D%7Bx%7D%20dx%20%3D%20%5Cln%20%5Cleft%7C%20x%20%5Cright%7C%20%2B%20C"/>
</p>
<p>
    <br/>
</p>

        </script>
            </div>
            <div id="btns" style="margin-top:20px;">
                <div>

                    <button onclick="alert(UE.getEditor('editor').getAllHtml())">获得整个html的内容</button>
                    <button onclick="alert(UE.getEditor('editor').getContent())">获得内容</button>
                    <button onclick="UE.getEditor('editor').setContent('<p>欢迎使用 UEditorPlus</p>', false)">写入内容</button>
                    <button onclick="UE.getEditor('editor').setContent('<p>欢迎使用 UEditorPlus</p>', true)">追加内容</button>
                    <button onclick="alert(UE.getEditor('editor').getContentTxt())">获得纯文本</button>
                    <button onclick="alert(UE.getEditor('editor').getPlainTxt())">获得带格式的纯文本</button>
                    <button onclick="alert(UE.getEditor('editor').hasContents())">判断是否有内容</button>
                    <button onclick="UE.getEditor('editor').focus()">使编辑器获得焦点</button>
                    <button onmousedown="isFocus()">编辑器是否获得焦点</button>
                    <button onmousedown="setBlur()">编辑器失去焦点</button>
                    <button onclick="getSelectText()">获得当前选中的文本</button>
                    <button onclick="UE.getEditor('editor').execCommand('insertHtml', '插入的内容')">插入内容</button>
                    <button onclick="UE.getEditor('editor').setEnabled()">设定可编辑</button>
                    <button onclick="UE.getEditor('editor').setDisabled('fullscreen')">设定不可编辑</button>
                    <button onclick="UE.getEditor('editor').setHide()">隐藏编辑器</button>
                    <button onclick="UE.getEditor('editor').setShow()">显示编辑器</button>
                    <button onclick="UE.getEditor('editor').setHeight(300)">设置固定高度</button>
                    <button onclick="UE.getEditor('editor')">创建编辑器</button>
                    <button onclick="UE.getEditor('editor').destroy()">销毁编辑器</button>
                    <button
                        onclick="alert( UE.getEditor('editor').execCommand('get_auto_save_content') )">草稿箱-获取</button>
                    <button
                        onclick="UE.getEditor('editor').execCommand('clear_auto_save_content'); alert('已清空草稿箱')">草稿箱-清空
                    </button>
                    <button onclick="UE.getEditor('editor').execCommand('set_auto_save_content'); alert('已保存')">草稿箱-立即保存
                    </button>
                    <button onclick="UE.getEditor('editor').execCommand('auto_save_restore')">草稿箱-恢复到编辑器</button>
                </div>
            </div>

            <script type="text/javascript">
                var ue = UE.getEditor('editor', {
                    // autoHeightEnabled: false,
                    // retainOnlyLabelPasted: true,
                });
                ue.on('contentchange', function() {
                    // console.log('contentchange', ue.getContent());
                });

                function isFocus(e) {
                    alert(UE.getEditor('editor').isFocus());
                    UE.dom.domUtils.preventDefault(e)
                }

                function setBlur(e) {
                    UE.getEditor('editor').blur();
                    UE.dom.domUtils.preventDefault(e)
                }

                function getSelectText() {
                    var range = UE.getEditor('editor').selection.getRange();
                    range.select();
                    var txt = UE.getEditor('editor').selection.getText();
                    alert(txt)
                }
            </script>
        </div>
    </body>
</html>
